import React, { useState } from "react";
import { Dropdown, Layout,Button, type MenuProps } from "antd"
import { useNavigate } from "react-router-dom";
const { Header, Footer, Sider, Content } = Layout;
import CourseTable from './courseComponent/courseTable'
import EditOrCreateCourse from './courseComponent/EditOrCreateCourse'
import { useReactive, useRequest } from "ahooks";
import { getCourse,type Course } from '../api/course'
function CoursePage(){
    const nav = useNavigate()
    const [tableData,setTableData] = useState([])
    const [model,setModel] = useState(false)
    const [editValue,setEditValue] = useState<Course | undefined>()
    const loginOut = ()=>{
        localStorage.removeItem('token')
        nav("/login")
    }
    const items: MenuProps["items"] = [
        {
            key: '1',
            label: (
              <span onClick={loginOut}>退出登录</span>
            ),
        },
    ]
    const {run,loading} = useRequest(getCourse,{
        onSuccess:({data})=>{
            setTableData(data)
            setModel(false)
        }
    })
    function handleCreate() {
        setModel(true)
        setEditValue(undefined)
    }
    return(
        <Layout>
            <Header className="flex justify-between">
                <span className="text-white">课程管理</span>
                <Dropdown menu={{items}} className="text-white">
                    fg
                </Dropdown>
            </Header>
            <Content>
                <Button onClick={()=>handleCreate()}>创建课程</Button>
                <EditOrCreateCourse 
                    isOpen={model} 
                    defaultValue={editValue}
                    closeModal={()=> setModel(false)}
                    reloadData={run}></EditOrCreateCourse>
                <CourseTable 
                    loading={loading} 
                    reloadData={run} 
                    data={tableData}
                    openModel={(value)=>{
                        setModel(true)
                        setEditValue(value)
                    }}></CourseTable>
            </Content>
            <Footer className="w-full text-center fixed bottom-0">duan</Footer>
        </Layout>
    )
}
export default CoursePage